<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div class="archive-header" slot="header">
      <span>文章归档</span>
    </div>
    <ul class="archive-list">
      <li :key="a.year+a.month" v-for="a in archiveList">
        <el-button @click="view(a.year,a.month)" type="text">{{`${a.year}年${a.month}月`}}</el-button>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    archiveList: {
      type: Array,
      default: () => []
    },
    methods: {
      view (year, month) {
        this.$router.push({ path: `/archives/${year}/${month}` })
      }
    }
  }
}
</script>

<style>
.archive-header {
  text-align: left;
  font-weight: 600;
  line-height: 20px;
}
.archive-list {
  text-align: left;
  list-style-type: none;
}
.archive-list li {
  display: inline-block;
  width: 40%;
  padding: 4px;
  font-size: 14px;
  line-height: 20px;
}
.archive-list li button {
  padding: 0;
}
</style>
